<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="icon" href="./favicon.ico">

    <style>
        .flex-container {
            display: flex;
            list-style: none;
            padding: 0;
        }

        .flex-item {
            margin: 10px;
            padding: 20px;
            background-color: lightblue;
            text-align: center;
        }

        .flex-item:nth-child(1) {
            /* flex-grow: 1; */
            flex-basis: 100px;  
        }

        .flex-item:nth-child(2) {
            /* flex-grow: 2; */
            flex-basis: 200px;  
        }

        .flex-item:nth-child(3) {
            /* flex-grow: 3; */
            flex-basis: 300px;  
        }
    </style>
</head>

<body>

    <form action="demo_form.php">
        First name: <input type="text" name="fname" value="John"><br>
        Last name: <input type="text" name="lname" value="Doe"><br>
        <input type="submit" value="Submit">
    </form>

    <table border="1">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td colspan="2">John Doe</td> <!-- 合并前两列 -->
            <td>30</td>
        </tr>
    </table>
    <table border="1">
        <tr>
            <th>Name</th>
            <th>City</th>
        </tr>
        <tr>
            <td rowspan="2">John Doe</td> <!-- 合并两行 -->
            <td>New York</td>
        </tr>
        <tr>
            <td>Los Angeles</td>
        </tr>
    </table>
    <p dir="rtl">我的名字。</p>
    <button accesskey="s">Save</button>
    <div contenteditable="true">
        <p>This content can be edited by the user.</p>
    </div>
    <img src="./3647.jpg_wh300.jpg" alt="这是一张图片">

    <input type="hidden" name="user_id" value="123456">
    <p><input type="submit" value="提交"></p>
    <ul class="flex-container">
        <li class="flex-item" style="order: 3;">order: 1</li>
        <li class="flex-item" style="order: 1;">order: 2</li>
        <li class="flex-item" style="order: 2;">order: 3</li>
    </ul>

    <script>
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        //获取时间戳方法3种
        console.log(date.getTime());//1
        console.log(+new Date());//2
        console.log(Date.now());//3
        console.log(year);
        console.log(month);

        function getFormattedCurrentDateTime() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');

            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        }
        console.log(getFormattedCurrentDateTime());// 输出: 2024-08-14 12:34:56

        function getDaysBetweenDates(date1, date2) {
            const startDate = new Date(date1);
            const endDate = new Date(date2);
            const timeDifference = endDate.getTime() - startDate.getTime();
            const daysDifference = timeDifference / (1000 * 60 * 60 * 24);
            return Math.abs(Math.ceil(daysDifference));//绝对值 向上取整
        }
        console.log(getDaysBetweenDates('2024-08-01', '2024-08-15'));//14

        function getWeekStartAndEndDate(dateStr) {
            const date = new Date(dateStr);//创建一个日期对象
            const dayOfWeek = date.getDay();//获取日期的星期几 0-6
            const distanceToMonday = (dayOfWeek + 6) % 7;//获取星期几到星期一的距离
            const distanceToSunday = (7 - dayOfWeek) % 7;//获取星期几到星期日的距离
            //获取星期一和星期日的日期
            const monday = new Date(date);
            monday.setDate(date.getDate() - distanceToMonday);//获取星期一
            const sunday = new Date(date);
            sunday.setDate(date.getDate() + distanceToSunday);

            const formatDate = (d) => {
                const year = d.getFullYear();
                const month = String(d.getMonth() + 1).padStart(2, '0');
                const day = String(d.getDate()).padStart(2, '0');
                return `${year}-${month}-${day}`;
            };
            return {
                monday: formatDate(monday),//函数调用
                sunday: formatDate(sunday)
            };
        }
        const weekDates = getWeekStartAndEndDate('2024-08-14');
        console.log(weekDates);// 输出: { monday: '2024-08-12', sunday: '2024-08-18' }


        const arr = ['red', 'blue', 'pink']

        // 1. 数组 map方法 处理数据并且 返回一个数组
        const newArr = arr.map(function (ele, index) {
            // console.log(ele)  // 数组元素
            // console.log(index) // 索引号
            return ele + '颜色'
        })
        console.log(newArr)

        // 2. 数组join方法  把数组转换为字符串
        // 小括号为空则逗号分割
        console.log(newArr.join())  // red颜色,blue颜色,pink颜色
        // 小括号是空字符串，则元素之间没有分隔符
        console.log(newArr.join(''))  //red颜色blue颜色pink颜色
        console.log(newArr.join('|'))  //red颜色|blue颜色|pink颜色


        const reg = /^(?:(?:\+|00)86)?1\d{10}$/
        console.log(reg.test('13812345678'));


    </script>
</body>

</html>